<template>
    <div>
        <div class="mt-4 mb-4">
            <Button to="/category/create" icon="ios-add-circle" type="primary">添加</Button>
            <Button icon="ios-trash-outline" type="error">删除选中</Button>
        </div>
        <Table @on-page-size-change='pageSizeChange' class="mt-4" border :columns="columns" :data="categories"></Table>
        <Page class="mt-4" :total="total" show-sizer />
    </div>
</template>
<script>
    export default {
        name: 'Categories',
        data () {
            return {
                total:0,
                currentPage:1,
                pageSize:10,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        width: 60,
                        align: 'center',
                        key: 'id',
                    },
                    {
                        title: 'Name',
                        width: 120,
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: 'parent_id',
                        width: 120,
                        key: 'parent_id'
                    },
                    {
                        title: 'order',
                        width: 120,
                        key: 'order'
                    },
                    {
                        title: 'slug',
                        width: 120,
                        key: 'slug'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({name:'category_edit',params:{id:params.row.id}});
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                categories: []
            }
        },
        methods: {
            pageSizeChange (pageSize) {
                this.pageSize = pageSize;
                this.fetchUsers();
            },
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.users[index].name}<br>Age：${this.users[index].age}<br>Address：${this.users[index].address}`
                })
            },
            remove (index) {
                this.categories.splice(index, 1);
            },
            fetchCategory() {
                http.get('/api/category',{
                    params: {
                        with_page: true,
                        per_page: this.pageSize,
                        current_page: this.currentPage
                    }
                }).then((data)=>{
                    this.total = data.total;
                    this.categories = data.data;
                    this.currentPage = data.current_page;
                });
            }
        },
        mounted() {
            this.fetchCategory();
        }
    }
</script>
